<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>心灵共融|MINDMELD</title>

  <!-- Import TensorFlow.js -->
  <script src="tf.min.js"></script>
   <script src="vue.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script> -->
  <!-- Import tfjs-vis -->
  <script src="tfjs-vis.umd.min.js"></script>
  <!-- Import the data file -->
  <script src="data.js" ></script>
  <!-- Import the main script file -->


</head>
<body>
<div id="app">
MINDMELD网站
<button v-on:click="run" v-show="pagecode==0">启动训练</button>
<div id="takeName" v-show="pagecode==1">
正在启动实例
请挑选一个名字吧
<input id="moduleName"/>
<button v-on:click="getName">确定</button>
</div>
<div id="Net" v-show="pagecode==2">
 <div v-html="message"></div>
现在让我们来确定神经网络类型
<button v-on:click="imgNet">卷积神经网络</button>
</div>
<video id="video" v-show="camera==1" autoplay style="width: 160px;height: 160px"></video>
<div id="train" v-show="pagecode==3">
现在我们开始收集数据
<br>
 <div v-html="hLabels"></div>
<button v-on:click="addLabel" style="color: red;">添加标签</button>
<input id="label" placeholder="标签"/>
<input id="choosedLabel" placeholder="选择的标签"/>
<br>
	<!--拍照按钮-->
	<div>
	<button id="captures" v-on:click="capture" style="color: red;">开始捕获</button>
	<button v-on:click="stop" style="color: red;">停止捕获</button></div>
	<!--描绘video截图-->
	<canvas id="canvas" width="160" height="160"></canvas>
	您可以在训练前设置一些参数
<button v-on:click="start">开始训练</button>
</div>
<div v-show="pagecode==4">
loss函数: {{ loss }}
</div>
<div v-show="pagecode==5">
训练结束
<button v-on:click="test">测试</button>
{{ testResult }}
<button v-on:click="stop" style="color: red;">停止测试</button></div>
</div>
</div>
	<script src="script.js" ></script>
	
	<script type="text/javascript">
		var video = document.getElementById("video");
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		width = 160;
height = 160;
		//like12 modified,20210628,bug,navigator.mediaDevices为空会导致后面卡死
		if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia
				|| navigator.getUserMedia
				|| navigator.webkitGetUserMedia
				|| navigator.mozGetUserMedia){
			//调用用户媒体设备，访问摄像头
			getUserMedia({
				video:{width:160,height:160}
			},success,error);
		} else {
			alert("你的浏览器不支持访问用户媒体设备");
		}
		
		//访问用户媒体设备的兼容方法
		function getUserMedia(constrains,success,error){
			//like12 modified,20210628,bug,navigator.mediaDevices为空会导致后面卡死
			if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
				//最新标准API(新版浏览器https)
				navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
			} else if (navigator.webkitGetUserMedia){
				//like12 modified,20210628,不是这种调用方法 应该为后者
				//webkit内核浏览器(老版浏览器)
				//navigator.webkitGetUserMedia(constrains).then(success).catch(error);
				navigator.webkitGetUserMedia({ "video": true }, success, error);
			} else if (navigator.mozGetUserMedia){
				//Firefox浏览器
				navagator.mozGetUserMedia(constrains).then(success).catch(error);
			} else if (navigator.getUserMedia){
				//旧版API
				navigator.getUserMedia(constrains).then(success).catch(error);
			}
		}
		
		//成功的回调函数
		function success(stream){
			//like12 modifed,20210618,Chrome升级后,新版本不再支持该用法
			//摄像头视频流显示报错Failed to execute 'createObjectURL' on 'URL'
			//研究即时通信的过程中需要调用摄像头，发现报错，原来是谷歌弃用了这个方法，根据官方提示修改即可
			//所以原先的代码：video.src = URL.createObjectURL(stream);
			//需要被修改为：video.srcObject = stream;
			//(新版浏览器https)
			if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
				video.srcObject = stream;
			}
			//(老版浏览器)
			else{
				//兼容webkit内核浏览器
				var CompatibleURL = window.URL || window.webkitURL;
				//将视频流设置为video元素的源
				//此处的代码将会报错  解决的办法是将video的srcObject属性指向stream即可
				video.src = CompatibleURL.createObjectURL(stream);
			}
			//播放视频
			video.play();
		}
		
		function error(error){
			alert("对不起，在您的电脑上暂时无法访问媒体设备：" + error.name + " " + error.message);
		}
		
	</script>  
</body>
</html>